<template>
    <div class = 'drag-panel-wrapper jimu-map-panel jimu-show'  v-show = "isShow"> 
		<div class = "panel-title">
			<div class="drag-container" @mousedown="mousedownHandle">
				<span>{{ panelTitle }}</span>
			</div>
			<div class = "close-container" @click="close">
				<i class = "el-icon-close"></i>
			</div>
		</div>
		
		<div class = "panel-content">
			<component v-for = "widget in widgetList" 
				:is = "widget" 
				:key = "widget.id" 
				:style = "widget.positionStyle" 
			>
			</component>  
		</div>
    </div>
</template>

<script>
import BaseLayoutWidget from '@/jimu/BaseLayoutWidget.js'
export default {
	name: 'DragPanelWidget',
	mixins:[ BaseLayoutWidget ],
	data(){
		return{
			posX: 0,
			posY: 0,
			isShow: false,
			panelTitle: "" 
		}
	},
	mounted(){
		
	},
	methods:{
		mousedownHandle: function(e){
			this.posX = e.clientX - this.$el.offsetLeft
			this.posY = e.clientY - this.$el.offsetTop
			this.$el.style.opacity = this.config.dragOpacity
			window.addEventListener('mousemove', this.moveHandle)
			window.addEventListener('mouseup', this.endMovingHandle)
		},
		/* 鼠标移动事件 */
		moveHandle: function(e){
			let left = e.clientX - this.posX
			let top = e.clientY - this.posY
			if(top < 0){
				top = 0
			}
			if(left < 0){
				left = 0
			}
			this.$el.style.left = left + "px"
			this.$el.style.top = top + "px"
		},

		/* ViewBox拖拽结束 */
		endMovingHandle: function(e){
			this.$el.style.opacity = 1
			window.removeEventListener('mousemove', this.moveHandle)
			window.removeEventListener('mouseup', this.endMovingHandle)
		},

		showPanel: function(config){
			this.isShow = true
			this.panelTitle = config.name
		}
	}
}
</script>

<style lang="scss">
$titleHeight: 35px;
.drag-panel-wrapper{
	position: absolute;
	min-width: 300px;
	.panel-title{
		height: $titleHeight;
		width:100%;
    	border-bottom: 1px solid #eee;
		line-height: $titleHeight;
		padding:0 5px 0 10px;
		border-radius: 4px 4px 0 0;
		.drag-container{
			position: absolute;
			left:10px;
			right:40px;
			height: $titleHeight;
			cursor: move;
		}
		.close-container{
			width:30px;
			text-align: center;
			cursor: pointer;
			float:right;
			height: $titleHeight;
			line-height: $titleHeight;
		}
	}
	.panel-content{
		padding: 15px;
	}
}
</style>